<template>
  <div style="margin: 5px;background-color: #E4E7ED;">
    <el-dialog
      :before-close="params.handleClose()"
      :close-on-click-modal="params.closeModal"
      :close-on-press-escape="params.closeEsc"
      :modal="params.modal"
      :show-close="params.showClose"
      :title="params.title"
      :visible.sync="params.dialogVisible"
      width="30%"
    >
      {{ params.data }}
      <span class="dialog-footer" slot="footer" v-if="params.showBtn">
        <el-button
          :style="item.style"
          :type="item.type"
          @click="item.click(params)"
          v-bind:key="item.name"
          v-for="item in params.btn"
          >{{ item.name }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "my-dialog-v1",
  data() {
    return {
      params: {
        title: "提示", //标题
        data: "", //内容
        modal: true, //遮罩层
        closeModal: true, //点击遮罩层关闭弹窗
        showClose: true, //显示关闭按钮
        closeEsc: true, //是否可以通过esc关闭
        dialogVisible: false,
        close: function(param) {
          param.dialogVisible = false;
        },
        submit: function(param) {
          param.dialogVisible = false;
        },
        showBtn: true,
        btn: [
          {
            name: "取消",
            type: "",
            style: " .btn",
            click: function(param) {
              param.close(param);
            }
          },
          {
            name: "确定",
            type: "primary",
            style: " .btn",
            click: function(param) {
              param.submit(param);
            }
          }
        ],
        handleClose: function() {} //关闭的回调
      }
    };
  },
  props: {
    dialogV1_params: Object
  },
  methods: {
    show() {
      this.params.dialogVisible = true;
    },
    close() {
      this.params.dialogVisible = true;
    }
  },
  mounted() {},
  created() {
    const params = this.dialogV1_params || {};
    this.params = Object.assign(this.params, params);
  }
};
</script>

<style scoped>
.btn {
  margin: 5px;
}
</style>
